*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
    list-style: none;
}
img{
    display: block;
}
html{
    width: 100%;
    height: 100%;
    body{
        width: 100%;
        height: 100%;
        &>div{
            width: 100%;
            height: 100%;
            background: #EEEEEE;
            display: flex;
            flex-direction: column;
        }
    }
}
header{
    display: flex;
    font-size: 0.14rem;
    justify-content: space-between;
    padding: 0.06rem 0.15rem;
    text-align: center;
    input{
        height: 0.3rem;
        background: #fff;
        border: none;
        padding: 0.06rem;
    }
    a{
        align-self: center;
        color: #888888;
    }
}
.content{
    flex-grow: 1;
    &>ul{
        border-bottom: 1px solid #ccc;
        display: flex;
        padding: 0.06rem;
        li{
            flex-grow: 1;
            border: 1px solid #5E646E;
            font-size: 0.15rem;
            text-align: center;
            padding: 0.06rem 0;
            &:hover{
                background: #5E646E;
                color: #fff;
            }
        }
        li:nth-child(1){
            border-radius: 5px 0 0 5px;
            border-radius: none;
        }
        li:nth-child(3){
            border-left: none;
            border-radius:0  5px 5px 0 ;
        }
    }
}
footer{
    ul{
        border-top: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        height: 0.45rem;
        padding: 0 0.1rem ;
        li{
            align-self: center;
        }
        li:nth-child(1){
            &>a>div{
                margin-top: -20px;
                background: #fff;
                border: 4px;
                width: 0.45rem;
                height: 0.45rem;
                text-align: center;
                border: 1px solid #ccc;
                border-radius:50px;
                display: flex;
                div{
                    align-self:center;
                    width: 90%;
                    height: 90%;
                    margin: auto;
                    border-radius:50px;
                    text-align: center;
                    background: #E32E5D;
                    display: flex;
                    img{
                        margin: auto;
                        align-self: center;
                    }
                }
            }
        }
        
    }
}

